<template>
  <div>
    <div class="app-container card-body-height uni-scroll">
      <el-form
        :inline="true"
        @submit.native.prevent
      >
        <el-form-item>
          <el-input v-model="userName" :placeholder="$t('user')"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addFun">{{ $t('add') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="gotoHistory">{{ $t('history') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="unbind">{{ $t('unbind') + $t('owner') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            v-show="mList.length > 0"
            icon="el-icon-delete"
            type="danger"
            @click="mDel"
          >{{ $t('delete') }}
          </el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="multipleTable"
        :data="deviceBelongList"
        style="width: 100%;"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50"/>
        <el-table-column :label="$t('icon')">
          <template slot-scope="scope">
            <el-image
              style="width: 40px;height: 40px;margin-top: 10px"
              :src="scope.row.userIconUrl"
              fit="fit"
            >
              <div slot="error" class="image-slot">
                <i style="font-size: 35px" class="el-icon-picture-outline"/>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="userName" :label="$t('user')"/>
        <el-table-column :label="$t('focus')">
          <template slot-scope="scope">
            <el-switch
              @change="save(scope.row)"
              v-model="scope.row.follow"
            />
          </template>
        </el-table-column>
        <el-table-column :label="$t('status')+$t('notice')">
          <template slot-scope="scope">
            <el-switch
              @change="save(scope.row)"
              v-model="scope.row.noticeStatus"
            />
          </template>
        </el-table-column>
        <el-table-column :label="$t('push')">
          <template slot-scope="scope">
            <el-switch
              @change="save(scope.row)"
              v-model="scope.row.canNotice"
            />
          </template>
        </el-table-column>
        <el-table-column :label="$t('setting')">
          <template slot-scope="scope">
            <el-switch
              @change="save(scope.row)"
              v-model="scope.row.canSetting"
            />
          </template>
        </el-table-column>
        <el-table-column :label="$t('manage')">
          <template slot-scope="scope">
            <el-switch
              @change="save(scope.row)"
              v-model="scope.row.canManage"
            />
          </template>
        </el-table-column>
        <el-table-column :label="$t('owner')">
          <template slot-scope="scope">
            <el-checkbox
              :value="scope.row.userId === device.userId"
              @change="ownerChange(scope.row.userId)"
            />
          </template>
        </el-table-column>
        <el-table-column width="80" :label="$t('function')">
          <template slot-scope="scope">
            <!--            <el-button-->
            <!--              type="text"-->
            <!--              icon="el-icon-edit"-->
            <!--              @click="save(scope.row)"-->
            <!--            >{{ $t('save') }}-->
            <!--            </el-button>-->
            <el-button
              style="color: #f56c6c"
              type="text"
              icon="el-icon-delete"
              @click="del(scope.row)"
            >{{ $t('delete') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
import { cancelNotice, failureNotice, successNotice } from '@/util/common'
import { deleteBelong, deleteBelongList, getBelongList, insertBelong, updateBelong } from '@/api/iot/iotDeviceBelongApi'
import { deviceUnbindUser, getDevice, updateDeviceUser } from '@/api/iot/iotDeviceApi'

export default {
  name: 'DeviceBelong',
  props: {
    deviceCore: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      userName: null,
      device: {},
      deviceBelong: {},
      deviceBelongList: [],
      mList: []
    }
  },
  mounted() {
    this.getDevice()
  },
  methods: {
    ownerChange(userId) {
      updateDeviceUser({
        deviceId: this.device.deviceId,
        userId: userId
      }).then(res => {
        const { code } = res
        if (code === '200') {
          successNotice(this)
        }
        this.getDevice()
      })
    },
    unbind() {
      deviceUnbindUser({
        deviceCore: this.device.deviceCore
      }).then(res => {
        const { code } = res
        if (code === '200') {
          successNotice(this)
        }
        this.getDevice()
      })
    },
    getDevice() {
      getDevice({
        deviceCore: this.deviceCore
      }).then(res => {
        const data = res.data
        if (data) {
          this.device = data
          this.getBelongList()
        }
      })
    },
    handleSelectionChange(val) {
      const mList = []
      val.forEach(function(row) {
        mList.push(row.deviceBelongId)
      })
      this.mList = mList
    },
    mDel() {
      const that = this
      this.$confirm(this.$t('deletePrompt'), this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteBelongList({
            idList: that.mList
          }).then(res => {
            const { code } = res
            if (code === '200') {
              that.getBelongList()
            }
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    },
    gotoHistory() {
      this.$router.push({
        path: '/device/belong/history/' + this.deviceCore,
        query: { deviceCore: this.deviceCore }
      })
    },
    addFun() {
      const that = this
      insertBelong({
        deviceCore: this.deviceCore,
        userName: this.userName
      }).then(res => {
        const { code, msg } = res
        if (code === '200') {
          that.getBelongList()
        } else if (code === '201') {
          switch (msg) {
            case 'user':
              failureNotice(that, that.$t('not') + that.$t('user'))
              break
            case 'exist':
              failureNotice(that, that.$t('repeat'))
              break
          }
        }
      })
    },
    save(item) {
      const that = this
      updateBelong({ ...item }).then(res => {
        const { code } = res
        if (code === '200') {
          successNotice(that)
        }
        this.getBelongList()
      })
    },
    del(item) {
      const that = this
      this.$confirm(that.$t('delete') + item.userName, that.$t('prompt'), {
        confirmButtonText: that.$t('confirm'),
        cancelButtonText: that.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteBelong({
            deviceBelongId: item.deviceBelongId
          }).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(that)
              that.getBelongList()
            }
          })
        })
    },
    getBelongList() {
      const that = this
      getBelongList({
        deviceCore: this.deviceCore
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          that.deviceBelongList = data
        }
      })
    }
  }
}
</script>
<style scoped>
.item-name {
  font-size: 1.5em;
  color: #00a9da;
}
</style>
